<template>
  <div>
    <canvas :width="styleObj.width" :height="styleObj.height" ref="canvas"></canvas>
  </div>
</template>
<script>
export default {
  props: {
    progress: { type: String },
    styleObj: {
      type: Object,
      default: function () {
        return {
          width: 51,
          height: 51
        }
      }
    }
  }, // 接收进度
  mounted () {
    const radius = this.styleObj.width/2-5;
    var ctx = this.$refs.canvas.getContext('2d')
    ctx.beginPath()
    var x = (this.progress / 100) * Math.PI * 2
    console.log(Math.PI / x)

    ctx.arc(radius, radius, radius, 0, 2 * Math.PI, false)
    // 不同的进度使用不同颜色绘制
    if (x <= 2) {
      ctx.strokeStyle = 'rgb(32,160,255)'
    }
    if (x > 2 && x <= 4) {
      ctx.strokeStyle = 'rgb(255,73,73)'
    }
    if (x > 4 && x <= 6) {
      ctx.strokeStyle = 'rgb(230,162,60)'
    }
    if (x > 6) {
      ctx.strokeStyle = 'rgb(19,206,102)'
    }
    ctx.lineWidth = 4
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()

    ctx.arc(radius,radius, radius, -Math.PI / 2, -Math.PI / 2 + x, true)
    ctx.strokeStyle = 'rgb(229,233,242)'

    ctx.lineWidth = 4
    ctx.stroke()
  }
}
</script>
<style scoped>
div {
  width: 51px;
  height: 51px;
}
canvas {
  margin: 0px auto;
}
</style>
